<!-- 意见反馈 -->
<template>
	<view class="xpadding">
		<view class="baseW feedback-text">
			<textarea maxlength="300" class="comment-info" value="" placeholder="请填写原由..." v-model="content" @input="conInput"/>
			<view class="text-num">{{num}} / 300</view>
		</view>
		<view class="baseW feedback-img">
			<view class="pre-title u-f-ac">
				<view>上传截图</view>
				<view>（最多上传3张）</view>
			</view>
			<view>
				<upload-image @myEvens="getImages" :startList="listImg"></upload-image>
			</view>
		</view>
		<tui-button class="btn-fixed" width="650rpx" type="danger" :shadow="true" shape="circle" :size="30" @click="add">确定</tui-button>
		<tui-modal :show="modalShow" :custom="true" class="finish-modal" @click='hindeModal'>
			<text class="icon iconfont icon-cuo"></text>
			<view class="feedback-finish text-center">
				<image src="https://zj.gdwrh.com/fnyg/static/images/my-img/fkyj_cg_x3.png"></image>
				<view class="thanks">感谢您的反馈，我们会尽快处理</view>
				<tui-button width="80%" type="danger" :shadow="true" margin="0 50rpx" shape="circle" :size="30" @click="hindeModal">完成</tui-button>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import uploadImage from '@/components/upload-image/upload-image.vue'
	export default {
		components:{
			uploadImage
		},
		data() {
			return {
				modalShow: true,
				listImg: [],	
				imgs: '',
				num: 0,
				flag: true,
				content: '',
			}
		},
		methods: {
			conInput(){
			 	this.num = this.form.content.trim().length
			},
			getImages(imgs){
				// 图片返回路径数组
				this.listImg = imgs
				this.imgs = imgs.toString()
			},
			hindeModal(){
				this.modalShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
.feedback-text {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.comment-info{
	font-size: 24rpx;
	width: 100%;
	height: 320rpx;
}
.text-num {
	text-align: right;
	color: #ccc;
	font-size: 24rpx;
}
.feedback-img {
	padding-bottom: 20rpx;
}
.pre-title{
	padding: 30upx 0;
}
.pre-title>view:last-child{
	font-size: 24rpx;
	color: #ccc;
}
//意见反馈完成弹出框
 .finish-modal{
	 .icon{
		position: absolute;
		right: 60rpx;
		top: 40rpx;
	 }
 }
.feedback-finish {
	padding-top: 60rpx;
	font-size: 30rpx;
}
image {
	width: 130rpx;
	height: 130rpx;
	margin-bottom: 30rpx;
}
.thanks {
	margin-bottom: 98rpx;
}
</style>

